<section class="content">
    <div class="box-content">
        <div class="template-account">
            <!-- for title -->
            <div class="sub-titile">
                <h3>Submit Job V2</h3>
                <sup class="preview">preview</sup>
            </div>
            <!-- button -->
            <div>
                <div class="upload-btn-wrapper import-sty">
                    <label for="importYaml" class="main-button">Import Yaml</label>
                    <input type="file" id="importYaml" name="importYaml" class="file hidden" title="">
                </div>
                <div class="upload-btn-wrapper">
                    <button class="main-button" id="EditYamlBtn">Edit Yaml</button>
                </div>
            </div>
        </div>
        <!-- job description -->
        <div class="bg-jobmessage">
            <div class="box-jobmessage">
                <table class="showDesJob">
                    <tr>
                        <td>
                            <img class="logo" src="/assets/img/marketplace/job.jpg">
                        </td>
                        <td>
                            <div class="detail">
                                <div class="row btns">
                                    <span class="detail-jobname" id="job1-name">Job Name</span>
                                    <button class="edit-jobinfo">
                                        <span id="job1-edit-button">
                                            <img class="edit-job-name" src="/assets/img/edit-grey.png" alt="">
                                        </span>
                                    </button>
                                </div>
                                <p id="job1-description">
                                    Please add job description.
                                </p>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="add-four" style="overflow: auto">
            <div class="add-content">
                <!-- for task -->
                <div class="row add-title">
                    <h3>Task</h3>
                    <div id="task-container">
                        <!-- add new task here! -->
                    </div>

                    <div class="col-md-2">
                        <a id="add-task-btn" data-toggle="modal">
                            <div class="add-new-item shadow">
                                <div class="add-new-item-content">
                                    <p>
                                        <img class="add-picture" src="/assets/img/Add.png" alt="">
                                    </p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <!-- for dockerimage -->
                <div class="row add-title">
                    <h3>Docker</h3>
                    <!-- have dockerimage content style -->
                    <div id="dockerimage-container">
                        <!-- will be adding new dockerimage here! -->
                    </div>

                    <div class="col-md-2 add-bottom-border">
                        <a id="add-dockerimage-btn" data-toggle="modal">
                            <div class="add-new-item shadow sty-docker">
                                <div class="add-new-item-content">
                                    <p class="plus-add">
                                        <img class="img-add" src="/assets/img/Add.png" alt="">
                                    </p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- for Script -->
                <div class="row add-title">
                    <h3>Script</h3>
                    <!-- have script content style -->
                    <div id="script-container">
                        <!-- will be adding new script here! -->
                    </div>
                    <div class="col-md-2 add-bottom-border">
                        <a id="add-script-btn" data-toggle="modal">
                            <div class="add-new-item shadow sty-docker">
                                <div class="add-new-item-content">
                                    <p class="plus-add">
                                        <img class="img-add" src="/assets/img/Add.png" alt="">
                                    </p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- for Data -->
                <div class="row add-title">
                    <h3>Data</h3>
                    <!-- have data content style -->
                    <div id="data-container">
                        <!-- will be adding new data here! -->
                    </div>
                    <div class="col-md-2 add-bottom-border">
                        <a id="add-data-btn" data-toggle="modal">
                            <div class="add-new-item shadow sty-docker">
                                <div class="add-new-item-content">
                                    <p class="plus-add">
                                        <img class="img-add" src="/assets/img/Add.png" alt="">
                                    </p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div id="addModalPlace" class="box-body"></div>
            <div id="addCustomizeModalPlace" class="box-body"></div>
        </div>
        <div id="json-editor-container"></div>
        <div id="yaml-editor-container">
            <div id="yaml-modal" class="modal fade" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-lg modal-llg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">Edit Yaml</h4>
                        </div>
                        <div class="modal-body" id="yaml-content">
                            <div id="yaml-editor-holder" style="border:1px solid #ccc"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary edit-save" id="yaml-edit-save-button">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="position-btns">
                <button class="btn btn-success sty-margin" id="submitJob">Submit</button>
                <button class="main-button" id="exportYamlBtn">Save As</button>
            </div>
        </div>
    </div>
    <div class="no-submit" id="submit-job-loading"></div>
    <!-- <%= loading() %> -->
</section>
